<!-- 销假 -->
<template>
	<view class="leave-info-box">
		<view class="leave-info-content">
			<view class="biaoti1">
				请假人基本信息
			</view>
			<view class="zhengwen2 m_top">
				学生学号 {{ id }}
			</view>
			<view class="zhengwen2 m_top">
				学生姓名 {{ name }}
			</view>
			<view class="zhengwen2 m_top">
				学生班级 {{ classname }}
			</view>
			<view class="time-title biaoti1">请假时间</view>
			<view class="leave-info-time zhengwen1">
				<view class="leave-info-left-time">
					<view>开始时间</view>
					<view class="start-time">
						<text class="start-date">{{startdate}}</text>
						<text class="start-time">{{starttime}}</text>
					</view>
				</view>
				<view class="leave-info-right-time">
					<view>结束时间</view>
					<view class="end-time">
						<text class="end-date">{{enddate}}</text>
						<text class="end-time">{{endtime}}</text>
					</view>
				</view>
			</view>
			<view class="num-time zhengwen1">
				<text>总时长:{{ numtime}}小时 </text> {{' '}} {{' '}}
				<text class=" color" v-show="!flag">您已经超出2小时</text>
			</view>
			<view class="leave-explain-title biaoti1" v-show="!flag">超时原因</view>
			<view class="leave-explain-content zhengwen1" v-show="!flag">{{ explain}}</view>
			<!-- <view class="leave-course-title biaoti1">外出路线描述</view>
			<view class="leave-course-content zhengwen1">{{ course }}</view> -->
			<view class="leave-img-title biaoti1">添加图片</view>
			<view>
				<button @click="chooseimage" type="default">点击上传</button>
				<!-- style="margin-top: 5pt;width: 100%;height: 80pt;background-color: #cfd6dd;" -->
				<image v-for="(item,index) in srcArr" :src="item" mode="widthFix"  ></image>
			</view>
			<!-- <view class="time-title biaoti1">请假审批</view>
			<view class="zhengwen1">
				<text>辅导员:</text>
				<text class="pad_be">张老师</text>
				<text> >> </text>
				<text class="pad_be">书记:</text>
				<text>周书记</text>
			</view> -->
			<br />
			<button style="margin: 10rpx 0rpx;" @click="submit" type="default">确认销假</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				name: '',
				classname: '计算机应用2班',
				startdate: '2022-6-9',
				starttime: '8:00',
				enddate: '2022-6-9',
				endtime: '12:00',
				numtime: '4',
				explain: '生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。生病了，去医院看病。',
				course: 'xxxxxx地铁站，xxxxxx医院，xxxxxxxxx餐厅，xxxxxxxx地铁站，xxxxxxxx公交车，返回学校',
				imgurl: '../../static/dImg.jpg',
				imgshow: false,
				srcArr:[],
				flag: false,
			}
		},
		methods: {
			open() {
				this.imgshow = true;
			},
			close() {
				this.imgshow = false;
			},
			chooseimage() {
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.srcArr = res.tempFilePaths
					}
				});
			},
			submit(){
				uni.showToast({
					title: '提交成功',
					duration: 2000
				});
			}

		},
		onLoad(options) {
			console.log(options);
			console.log(options.id, options.name, options.rangeTime);
			if(options.rangeTime > 48) {
				this.flag = false;
			} else {
				this.flag = true;
			}
			// 提交数据请求接口
			// uni.request({
			// 	url:'http://html5.bjsxt.cn/api/course/detail',
			// 	data:{
			// 		id:options.id,
			// 		course:options.course
			// 	},
			// 	success:(res) => {
			// 		this.getData = res.data.data;
			// 		this.introduceList = res.data.data.introduceList;
			// 		this.Clist = res.data.data.Clist;
			// 		this.imgT = res.data.data.image;
			// 		this.imageHeight = res.data.data.height;
			// 		// console.log(this.imgT);
			// 	}
			// })
			this.id = options.id,
				this.name = options.name
		},
		components: {
			// imgHD
		}
	}
</script>

<style lang="scss">
	@import url(@/common/common.css);

	.leave-info-box {
		width: 95%;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;

		.leave-info-content {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.m_top {
				margin-top: 10rpx;
			}

			.leave-info-name {
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				justify-content: center;
			}

			.leave-info-classnumber {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;

				.class-number {
					flex: 1;

				}

				.class-name {
					flex: 2;

				}
			}

			.time-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-info-time {
				display: flex;
				width: 100%;
				box-sizing: border-box;
				flex-direction: row;
				border: 1rpx solid #999999;
				padding: 20rpx;

				.leave-info-left-time {
					flex: 1;

					text {
						letter-spacing: 1rpx;
						line-height: 40rpx;
					}

					.start-date {
						margin-right: 20rpx;
					}

				}

				.leave-info-right-time {
					flex: 1;

					text {
						letter-spacing: 1rpx;
						line-height: 40rpx;
					}

					.end-date {
						margin-right: 20rpx;
					}
				}

			}

			.num-time {
				margin-top: 20rpx;

				.color {
					color: rgb(202, 17, 17);
				}
			}

			.leave-explain-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-explain-content {
				width: 100%;
				box-sizing: border-box;
				border: 1rpx solid #999999;
				padding: 20rpx;
			}

			.leave-course-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-course-content {
				width: 100%;
				box-sizing: border-box;
				border: 1rpx solid #999999;
				padding: 20rpx;
			}

			.leave-img-title {
				margin-top: 40rpx;
				margin-bottom: 20rpx;
			}

			.leave-img {
				display: flex;
				width: 100%;
				box-sizing: border-box;
				flex-direction: row;
				padding: 10rpx;
				overflow: hidden;

				.imgbox {
					flex: 1;

					image {
						width: 150rpx;
						height: 150rpx;
					}
				}
			}

			.teacher {
				width: 100%;
				box-sizing: border-box;
				margin-top: 40rpx;

				textarea {
					box-sizing: border-box;
					width: 100%;
					height: 200rpx;
					border: 1rpx solid #999999;
					padding: 20rpx;
				}
			}

			.yes {
				width: 600rpx;
				height: 80rpx;
				border: #999999 solid 1rpx;
				margin: 0 auto;
				margin-top: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #cb1111;
				margin-bottom: 80rpx;
			}



		}

		.shadebox {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			box-sizing: border-box;
			background: rgba(0, 0, 0, 0.6);
			padding-top: 50%;

			.shadecontentbox {
				width: 100%;
				height: 100%;
				position: absolute;
				display: flex;

				.imgHD {
					width: 100%;
					// margin-top: -25%;
					display: flex;
					justify-content: center;
				}
			}
		}

		.pad_be {
			padding: 0 20rpx;
		}

		// }

	}
</style>
